<div *ngIf="gcSummary">
    <h3>Global Compact Assessment</h3>
    <div class="mt-4 d-flex flex-row align-items-stretch shadow">
        <div class="card w-50 left-card">
            <div class="card-body pb-3">
                <h5>Overall Assessment</h5>

                <div class="d-flex align-items-center">
                    <img *ngIf="gcSummary.overallCompanyAssessment === gCAssessment.Watchlist" src="/assets/icons-svg/icon-watchlist.svg" class="global-compact-icon-lg float-left mr-2" />
                    <img *ngIf="gcSummary.overallCompanyAssessment === gCAssessment['Non-Compliant']" src="/assets/icons-svg/icon-not-compliant.svg" class="global-compact-icon-lg float-left mr-2" />
                    <img *ngIf="gcSummary.overallCompanyAssessment === gCAssessment.Compliant" src="/assets/icons-svg/icon-compliant.svg" class="global-compact-icon-lg float-left mr-2" />
                    <span class="current-rating">{{ gCAssessment[gcSummary.overallCompanyAssessment] }}</span>
                </div>
            </div>
        </div>

        <div class="card w-50 right-card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="card-body pillar-summary">
                        <div class="d-flex align-items-baseline">
                            <div class="mr-auto">Signatory Since</div>
                            <div class="ml-auto">
                                <span *ngIf="gcSummary.gcSignatorySince != null">{{ gcSummary.gcSignatorySince | date:'MMM y' }}</span>
                                <span *ngIf="gcSummary.gcSignatorySince == null">Not a signatory</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="card-body pillar-summary">
                        <div class="d-flex align-items-baseline">
                            <div class="mr-auto">Domicile</div>
                            <div class="ml-auto">{{ gcSummary.companyProfile.country }}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="card p-2 mt-2" *ngIf="hasNonCompliant !== hasWatchlist">
        Results displayed below reflect companies with {{ hasNonCompliant ? 'Non-Compliant' : 'Watchlist' }} status only.
    </div>

    <!-- Principles. Available only for watchlist or non-compliant assessments -->
    <div class="mt-5">
        <h3 class="mb-4">Principles by Area</h3>

        <div class="row">
            <div *ngFor="let pillar of pillars" class="col-md-3">
                <pillar [pillarId]="pillar.id" [pillarName]="pillar.name" [pillarData]="gcPrinciples ? getPillar(pillar.id) : null"
                    [principles]="pillar.principles"
                    [hasBothLists]="hasNonCompliant && hasWatchlist"
                    [gcSummary]="gcSummary"
                ></pillar>
            </div>
        </div>
    </div>
</div>
